<template>
	<view class="account_box">
		<view style="width: 100%">
			<xzy-navbar bgColor="#FFFFFF">
				<template #center>
					实名认证
				</template>
			</xzy-navbar>
		</view>
		<view class="main">
			<uv-form :model="formData" labelPosition="left" ref="formRef" labelWidth="112">
				<view class="card">
					<view class="title">
						<!-- <text style="color: red">*</text> -->
						认证说明
					</view>
					<view class="explain">
						禁止未成年人使用本平台服务为落实网络实名制管理要求、并为您提供更好的服务，我们需要您提供姓名、身份证号码信息，个人身份信息属于敏感信息，请您谨慎提供。我们将会对您填写的信息进行严格保密。
					</view>
				</view>
				<view class="card">
					<view class="title">
						<!-- <text style="color: red">*</text> -->
						认证信息
					</view>
					<view class="form">
						<uv-form-item label="姓名" :border-bottom="true">
							<uv-input v-model="formData.name" border="none" placeholder="请输入姓名"
								:labelStyle="{ color: '#222222', fontSize: '28rpx' }" inputAlign="right" clearable disabledColor="#fff"
								placeholderClass="placeholderStyle"></uv-input>

						</uv-form-item>
						<uv-form-item label="身份证号">
							<uv-input v-model="formData.cardNo" border="none" placeholder="请输入身份证号"
								:labelStyle="{ color: '#222222', fontSize: '28rpx' }" inputAlign="right" clearable disabledColor="#fff"
								placeholderClass="placeholderStyle" @click="cardClick"></uv-input>
						</uv-form-item>
					</view>
				</view>
			</uv-form>

			<view class="card" style="padding: 30rpx;">
				<view class="tips_header">
					<image class="tips_icon" src="@/static/mine/tips_icon.png" mode="aspectFill"></image>
					<view class="tips_title">温馨提示</view>
				</view>
				<view class="tips_content">
					<view>1、实名认证每天有限制次数，请一定填写仔细，以免耽误您的宝贵时间。</view>
					<view>2、同一身份信息只能实名一次，实名认证通过后只能修改一次，请核对无误后再提交。</view>
				</view>
			</view>
		</view>

		<view class="btn_box">
			<view class="btn" @click="submit">提交认证</view>
		</view>

		<xzy-keyboard ref="keyboardRef" mode="card" @confirm="keyboardConfirm" @change="keyBoardChange"></xzy-keyboard>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		checkStr,
		desensitizeIdCard
	} from '@/utils'
	import {
		GetRealAuth,
		SaveRealAuth
	} from '@/api/modules/mine'
	import useStore from '@/stores'

	const {
		globalStore
	} = useStore()

	const formData = reactive({
		cardNo: '',
		name: ''
	})

	const formRef = ref()
	onLoad(options => {
		getRealAuthInfo()
	})

	const keyboardRef = ref()

	function cardClick() {
		keyboardRef.value.open("请输入身份证号码", formData.cardNo)
	}

	function keyboardConfirm(e) {
		if (!e || !checkStr(e, 'card')) {
			uni.$uv.toast("请输入正确的身份证号码");
			return
		}

		formData.cardNo = e
		keyboardRef.value.close()
	}

	function keyBoardChange(e) {
		formData.cardNo = e
	}

	function submit() {
		if (flag.value > 5) {
			uni.$uv.toast('实名次数已超过限制，请联系客服')
			return
		}

		if (!formData.name) {
			uni.$uv.toast('姓名不能为空')
			return
		}
		if (!formData.cardNo) {
			uni.$uv.toast('身份证号不能为空')
			return
		}
		if (!checkStr(formData.cardNo, 'card')) {
			uni.$uv.toast('身份证号码格式不正确')
			return
		}

		uni.$showModal({
			title: '',
			content: '是否确定提交认证？',
			confirmVal: '确定',
			cancelVal: '取消'
		}).then(() => {
			SaveRealAuth({
				...formData
			}).then(res => {
				if (res?.code === 0) {
					uni.$uv.toast('实名认证成功')
					globalStore.setUserInfo(res.data)
					uni.navigateBack()
					return
				} else if (res?.code * 1 === 10012) {
					uni.$uv.toast('实名认证失败，请联系客服')
					return
				}
				uni.$showModal({
					title: '认证失败',
					content: `姓名或身份证号错误，还有${5 - flag.value * 1}次机会；连续错误超过5次后将无法实名认证，请核对后谨慎操作！`,
					confirmVal: '确定',
					cancelVal: '取消'
				}).then(() => {
					getRealAuthInfo()
				})
			})
		})
	}

	const flag = ref(0)
	//	查询可用实名次数
	function getRealAuthInfo() {
		GetRealAuth({
			userId: globalStore.userInfo.id
		}).then(res => {
			flag.value = res.data?.failNum ?? 0
		})
	}
</script>

<style lang="scss">
	.uv-form-item__body__right__message {
		margin-left: 0 !important;
	}

	:deep(.uv-form) {
		// margin: 0 0 0 40rpx;

		.uv-form-item__body {
			// padding: 15rpx 0 !important;
			padding: 15rpx 40rpx !important;
		}
	}

	.account_box {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f7f8fb;
		overflow: hidden;

		.main {
			width: calc(100% - 60rpx);
			padding: 0 30rpx 236rpx 30rpx;
			height: 100%;
			overflow: scroll;

			.card {
				// padding: 30rpx;
				display: flex;
				flex-direction: column;
				background: #fff;
				border-radius: 16rpx;
				margin-top: 20rpx;

				.explain {
					color: #222222;
					font-size: 28rpx;
					margin-top: 32rpx;
					line-height: 48rpx;
					color: rgba(34, 34, 34, 1);
					font-family: PingFang SC, PingFang SC;
					padding: 0 30rpx 30rpx 30rpx;
				}

				.form {
					margin-top: 20rpx;

					:deep(.uv-form-item) {
						height: 96rpx;
					}

					:deep(.placeholderStyle) {
						text-align: right;
						color: #999999;
						fontsize: 28rpx;
						fontwight: 600;
					}

				}

				.title {
					padding: 30rpx 30rpx 0 30rpx;
					height: 44rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: rgba(34, 34, 34, 1);
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					// font-size: 32rpx;
					// font-weight: 600;
					// color: #222222;
				}

				.tips_header {
					display: flex;
					margin-bottom: 32rpx;

					.tips_icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 8rpx;
					}

					.tips_title {
						height: 44rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: rgba(102, 102, 102, 1);
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}

				.tips_content {
					height: 192rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(102, 102, 102, 1);
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.img-box {
					position: relative;
					background: #f7f8fb;
					border-radius: 20rpx;
					margin: 0 20rpx;
					border: 1rpx solid #d8d8d8;
					display: flex;
					align-items: center;

					.close {
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: center;
						right: 0rpx;
						top: -14rpx;
						right: -14rpx;
						background: #ccc;
						width: 35rpx;
						height: 35rpx;
						border-radius: 50%;
					}
				}

				.img {
					width: 180rpx;
					height: 170rpx;
				}

				// .tips {
				// 	margin-top: 20rpx;
				// 	font-size: 24rpx;
				// 	color: #999999;
				// 	line-height: 36rpx;
				// }
			}
		}

		.btn_box {
			width: 100%;
			height: 196rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;

			.btn {
				width: 686rpx;
				height: 80rpx;
				background: #6E68E9;
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				color: #ffffff;
				font-size: 28rpx;
			}
		}
	}
</style>